<template>
	<view class="main">
		<view class="box ">
			<!-- <view class="card_row" @click="allPatient">
				<view class="icon_width">
					<u-image :src="selected" width="50rpx" height="50rpx" v-show="checked == 1"></u-image>
				</view>
				<view class="m-l-24 line">
					全部患者
				</view>
			</view> -->

			<view class="card_row_two">
				<view class="left">
					<view class="left_content" @click="filter">
						<view class="icon_width">
							<u-image :src="selected" width="50rpx" height="50rpx" v-show="checked == 2"></u-image>
						</view>
						<view class="m-l-24 line">
							<view class="">
								按条件筛选
							</view>
							<view class="sub_title">
								选中的患者或标签(二选一)将作为本次随访计划对象
							</view>
						</view>
					</view>
					<!-- <view class="">
						<u-icon :name="userArrow" size="40rpx" color="#CCCCCC"></u-icon>
					</view> -->
				</view>

				<view class="right">
					<view class="right_one" @click="chooseSomePatient">
						<view class="right_one_top">
							选择患者
						</view>
						<view class="right_one_bottom my_primary" v-if="PatientList.length > 0">
							已选{{PatientList.length}}个患者
						</view>
						<view class="right_one_bottom" v-if="PatientList.length == 0">
							选中的患者将作为本次随访计划对象
						</view>
					</view>
					<view class="right_one p-t-24" @click="chooseSomeMark">
						<view class="right_one_top">
							选择患者标签
						</view>
						<view class="right_one_bottom my_primary" v-if="markList.length > 0">
							已选{{markList.length}}个标签
						</view>
						<view class="right_one_bottom" v-if="markList.length == 0">
							被标记选中涉及所选患者标签的当前患者将作为本次随访计划对象
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userArrow: 'arrow-up',
				selected: require('@/static/img/Select_Team _Selected@2x.png'),
				checked: 2, //1全部 2按条件
				choose: 0, //0不选  1选择患者 2选择标签
				//PatientList:[],
				//markList:[]
			};
		},
		computed: {
			PatientList() {
				if (this.$store.state.doc.suifanghuanzheListSelected) {
					return this.$store.state.doc.suifanghuanzheListSelected
				} else {
					return []
				}
			},
			markList() {
				if (this.$store.state.doc.suifangUserListSelected) {
					return this.$store.state.doc.suifangUserListSelected
				} else {
					return []
				}
			},
		},
		methods: {
			chooseSomePatient() {
				this.$emit('conditions', 'huanzhe')
			},
			chooseSomeMark() {
				this.$emit('conditions', 'biaoqian')
			},
			allPatient() {
				//this.checked = 1
			},
			filter() {
				//this.checked = 2
			}
		}
	}
</script>

<style lang="scss">
	.my_primary {
		color: #4DC0D9 !important;
	}

	.main {
		position: absolute;
		width: 100%;
		min-height: 100%;
		background-color: #f8f8f8;

		.box {
			background-color: white;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			//align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #212121;
			line-height: 38rpx;
			padding: 24rpx;

			.card_row {
				display: flex;

				.sub_title {
					padding-top: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					line-height: 1.5;
				}

				.icon_width {
					width: 50rpx;
				}
			}

			.card_row_two {
				margin-top: 24rpx;
				display: flex;
				flex-direction: column;

				// align-items: center;
				// justify-content: space-between;
				.sub_title {
					padding-top: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					line-height: 1.5;
				}

				.icon_width {
					width: 50rpx;
				}

				.left {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left_content {
						display: flex;

					}
				}

				.right {
					display: flex;
					flex-direction: column;
					padding-left: 128rpx;
					padding-top: 24rpx;
					font-family: PingFang SC, PingFang SC;

					.right_one {
						font-weight: 500;
						font-size: 26rpx;
						color: #999999;
						line-height: 30rpx;

						.right_one_top {
							font-weight: 500;
							font-size: 30rpx;
							color: #002A34;
							line-height: 35rpx;
						}

						.right_one_bottom {
							padding-top: 16rpx;
							padding-bottom: 24rpx;
							font-weight: 500;
							font-size: 26rpx;
							color: #999999;
							line-height: 30rpx;
							border-bottom: 1px solid #f7f7f7;
						}
					}

				}
			}

			.line {
				padding-bottom: 24rpx;
				border-bottom: 1px solid #f7f7f7;
				flex: 1;
			}
		}
	}
</style>